<template>
  <div>
    <HomeHeader />
    <van-tabs v-model="avtiveCode" background="#e4e4e4" sticky>
      <van-tab
        :title="category.name"
        v-for="category in categoryList"
        :key="category.id"
      >
        <van-list
          v-model="category.loading"
          :finished="category.finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="loadMorePost"
        >
          <NewCategoryContent
            v-for="post in category.postList"
            :key="post.id"
            :postItem="post"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from "../components/HomeHeader";
import NewCategoryContent from "../components/NewCategoryContent";
export default {
  data() {
    return {
      /* avtiveCode: localStorage.getItem("token")
        ? // JSON.parse(localStorage.getItem("delColumnList")).length >= 2
          1
        : 0, */
      avtiveCode: 0,
      categoryList: [],
    };
  },
  components: {
    HomeHeader,
    NewCategoryContent,
  },
  computed: {
    // 将根据导航下标获取的分类封装
    cateCode() {
      return this.categoryList[this.avtiveCode];
    },
  },
  created() {
    // 根据本地存储的数据获取文章的分类情况
    if (localStorage.getItem("delColumnList")) {
      // 获取本地的文章分类
      let categores = JSON.parse(localStorage.getItem("delColumnList"));
      // 处理获取的本地数据的分类数据
      let res = {
        data: {
          data: categores,
        },
      };
      this.categoryList = res.data.data.map((category) => {
        return {
          ...category,
          // 增加一个属性：表示每个分类的新闻列表，不会出现请求数据覆盖问题 管理
          postList: [],
          // 每个分类有自己的分页情况 管理
          pageIndex: 1,
          pageSize: 5,
          // 每个分类有自己的加载及到最后一页的提示情况 管理
          loading: false,
          finished: false,
        };
      });
      // 在分类的列表的最后加入一个只带有name属性的对象 用来表示显示全部导航的跳转
      this.categoryList.push({
        name: "+",
      });
      // console.log(this.categoryList, "获取的分类情况");
      this.getPostItem();
    } else {
      // 否则发送请求获取导航分类
      this.$axios({
        url: "/category",
      }).then((res) => {
        // console.log(res.data.data);
        // 获取所有文章的分类，数据绑定之前在每个分类加上空数组(表示每个分类的文章列表)
        this.categoryList = res.data.data.map((category) => {
          return {
            ...category,
            // 增加一个属性：表示每个分类的新闻列表，不会出现请求数据覆盖问题 管理
            postList: [],
            // 每个分类有自己的分页情况 管理
            pageIndex: 1,
            pageSize: 5,
            // 每个分类有自己的加载及到最后一页的提示情况 管理
            loading: false,
            finished: false,
          };
        });
        // 在分类的列表的最后加入一个只带有name属性的对象 用来表示显示全部导航的跳转
        this.categoryList.push({
          name: "+",
        });
        // console.log(this.categoryList, "获取的分类情况");
        this.getPostItem();
      });
    }
  },
  methods: {
    // 根据当前的分类获取新闻列表 进行封装
    getPostItem() {
      this.$axios({
        url: "/post",
        params: {
          category: this.cateCode.id,
          pageIndex: this.cateCode.pageIndex,
          pageSize: this.cateCode.pageSize,
        },
      })
        .then((res) => {
          // console.log(res.data.data, "根据分类获取的文章");
          // ****根据分类id获取的文章数组绑定在postList,
          this.cateCode.postList = [
            ...this.cateCode.postList,
            ...res.data.data,
          ];
          // 处理完数据后将每次加载变成false
          this.cateCode.loading = false;
          // console.log(this.categoryList, "改造分类");
          // 根据响应的数据程度 判断是否到底内容显示到底提示
          if (res.data.data.length < this.cateCode.pageSize) {
            this.cateCode.finished = true;
          }
        })
        .catch((err) => {
          console.dir(err);
          this.$toast.fail("系统错误");
        });
    },
    // 翻页时页数加一
    loadMorePost() {
      this.cateCode.pageIndex += 1;
      this.getPostItem();
    },
  },
  watch: {
    // 监听导航栏的切换，获取对应文章分类的下标
    avtiveCode() {
      // 如果是点击了最后一个分类就不执行请求，而是跳转到栏目管理页面
      if (this.avtiveCode == this.categoryList.length - 1) {
        // 跳转到栏目管理页面
        // console.log("跳转栏目管理");
        this.$router.push("/column");
        // this.$router.push()
        return;
      } else {
        // console.log(this.avtiveCode, "分类avtiveCode");
        // 根据获取的分类的文章列表的数据是否为空判断是否发送请求：为空才发送请求，不为空显示之前的请求过的文章列表
        if (this.cateCode.postList.length == 0) {
          // 分类的文章列表为空 根据分类获取文章列表数据 不要每次请求数据
          this.getPostItem();
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 设置最后一个分类的样式 靠右黏住 取其父元素的倒数第1个元素
/deep/ .van-tab:nth-last-child(2) {
  background-color: #e4e4e4;
  position: sticky;
  width: 52px;
  font-size: 30/360 * 100vw;
  color: red;
  font-weight: 700;
  right: -8px;
}
</style>
